<template>
<el-container>
  <el-header>
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
      <el-form-item label="">
        <el-select v-model="searchObj.field" placeholder="检索字段">
          <el-option label="标题" value="title"></el-option>
          <el-option label="内容" value="content"></el-option>
          <el-option label="关键词" value="keywords"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="searchObj.keyword" placeholder="请输入检索关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </el-header>

  <el-main>
    <el-table
        :data="items"
        stripe
        tooltip-effect="light"
        style="width: 100%">
      <el-table-column
          prop="title"
          label="标题"
          :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="keywords"
          label="关键字"
          :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="digest"
          label="摘要"
          :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="content"
          label="内容"
          :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          label="操作"
          align="center">
        <template slot-scope="scope">
          <el-button type="success" size="small" icon="el-icon-edit" @click="onCheck" round>查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
        style="padding: 30px 0; text-align: center;"
        layout="total, sizes, prev, pager, next, jumper"/>
        <!--
        :current-page="page"
        :total="total"
        :page-size="limit"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"-->


  </el-main>

</el-container>
</template>
<script>
export default {
  name: 'Search',
  data() {
    return{
      input: '',
      searchObj: {
        field: '',
        keyword: ''
      },
      items: [],
    }
  },
  created() {
    this.selectAll();
  },

  mounted() {
  },
  methods: {
    selectAll() {
      const _this = this
      axios.get('http://localhost:9091/search/all').then(function (resp){
        _this.items = resp.data.data.list

      })
    },
    onSubmit() {
      const _this = this
      if (this.searchObj.keyword == ''){
        this.selectAll()
      }else {
        axios.get('http://localhost:9091/search/'+ this.searchObj.field + '/' + this.searchObj.keyword).then(function (resp){
          _this.items = resp.data.data.list
        })
      }
    },
    onCheck() {
      this.$router.push(
          {
            path: `/container`
          }
      )
    }
  }
}
</script>
<style>
.content{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 200px;
  background: palegreen;
}
</style>